<%layout("/common/layout.html"){%>

<style>
    .cropit-image-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 20px;
        margin-top: 7px;
        width: 200px;
        height: 200px;
        cursor: move;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<div class="row">
    <div class="col-md-4">
        <br>
        <br>
        <ul class="nav nav-pills nav-stacked text-center">
            <li class="active"><a href="/user/myInfo">我的信息编辑</a></li>
            <li><a href="${ctxPath}/user/myOrder">我的订单</a></li>
            <li><a href="${ctxPath}/user/myCollect">我的收藏</a></li>
            <li><a href="${ctxPath}/message/">我的私信</a></li>
            <li><a href="${ctxPath}/user/myNotice">我的通知</a></li>
        </ul>
    </div>
    <div class="col-md-8">

        <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
            <ul id="myTab" class="nav nav-tabs text-center" role="tablist">
                <li role="presentation" class=""><a href="#home-set" id="home-tab" role="tab" data-toggle="tab"
                                                    aria-controls="home" aria-expanded="false">个人信息</a></li>
                <li role="presentation" class=""><a href="#profile-set" role="tab" id="profile-tab"
                                                    data-toggle="tab"
                                                    aria-controls="profile" aria-expanded="false">密码更改</a></li>
                <li role="presentation" class=""><a href="#head-set" role="tab" id="head-tab" data-toggle="tab"
                                                    aria-controls="head" aria-expanded="false">头像更换</a></li>
                <li role="presentation" class=""><a href="#address-set" role="tab" id="address-tab"
                                                    data-toggle="tab"
                                                    aria-controls="address" aria-expanded="false">收货地址</a></li>
            </ul>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="myTabContent" class="tab-content">


                        <div role="tabpanel" class="tab-pane fade active in" id="home-set"
                             aria-labelledby="home-tab">
                            <form action="/user/editInfo" method="post" role="form">

                                <div class="row text-center">
                                    <span class="tit">修改你的帐号基本资料，登录信息和其他安全设置</span>
                                </div>

                                <div class="form-group row-left">
                                    <div class="form-group">
                                        <label for="email">邮箱</label>
                                        <input type="email" name="email" id="email" value="${session.user.email}"
                                               placeholder="输入邮箱地址"
                                               class="form-control">
                                    </div>
                                </div>

                                <div class="row row-left">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">用户名</label>
                                        <input type="text" name="name" class="form-control"
                                               value="${session.user.name}"
                                               id="exampleInputEmail1" placeholder="输入用户名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <br>

                                    <div class="row row-left">
                                        <label>性别</label>

                                        <%if(session.user.sex==0){%>
                                        <label class="radio-inline">
                                            <input type="radio" name="sex" id="optionsRadios1" value="0"
                                                   checked>男</label>
                                        <label class="radio-inline ">
                                            <input type="radio" name="sex" id="optionsRadios2" value="1">女</label>
                                        <%}else{%>
                                        <label class="radio-inline">
                                            <input type="radio" name="sex" id="optionsRadios1" value="0">男</label>
                                        <label class="radio-inline ">
                                            <input type="radio" name="sex" id="optionsRadios2" value="1"
                                                   checked>女</label>
                                        <%}%>

                                    </div>
                                </div>

                                <div class="form-group" id="prebro-touxiang">
                                </div>
                                <div class="row row-left">
                                    <div class="form-group">
                                        <label for="self-introduction">做个简洁的自我介绍吧</label>
                        <textarea class="form-control" name="feeling" rows="1" cols="100" style="width: 500px;"
                                  id="self-introduction"
                                  placeholder="自我介绍">${session.user.feeling}</textarea>
                                    </div>
                                </div>

                                <div class="row text-center">
                                    <button type="submit" class="btn btn-default">保存</button>
                                </div>

                                <br>
                            </form>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="profile-set" aria-labelledby="profile-tab">

                            <div class="row text-center">
                                <span class="tit">修改你的登陆密码</span>
                            </div>

                            <form role="form">
                                <div class="row row-left">
                                    <div class="form-group">
                                        <label for="exampleInputEmail3">当前密码</label>
                                        <input type="text" class="form-control" id="exampleInputEmail3"
                                               placeholder="当前密码">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">新密码</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1"
                                               placeholder="新密码">
                                    </div>
                                    <div class="form-group">
                                        <label for="conform-password">确认新密码</label>
                                        <input type="password" class="form-control" id="conform-password"
                                               placeholder="确认密码">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputEmail2">验证码</label>
                                        <input type="text" class="form-control" id="exampleInputEmail2"
                                               placeholder="输入验证码"
                                               maxlength="10">
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <button type="submit" class="btn btn-default">保存</button>
                                </div>
                                <br>

                            </form>

                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="head-set" aria-labelledby="profile-tab">
                            <div class="row text-center">
                                <h3><span class="glyphicon glyphicon-scissors"></span>修改头像</h3>
                            </div>

                            <div class="image-editor">

                                <div class="row text-center">
                                    <input type="file" class="cropit-image-input">
                                </div>


                                <div class="cropit-image-preview"></div>


                                <div class="row">
                                    <div class="col-md-4 col-md-offset-4 text-center">
                                        <p>调整大小</p>
                                        <input type="range" class="cropit-image-zoom-input">
                                    </div>
                                </div>

                                <div class="row text-center">
                                    <button class="btn btn-primary conform" data-toggle="modal"
                                            data-target="#checkInfo">提交
                                    </button>
                                </div>

                            </div>


                            <div class="modal fade" id="checkInfo" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-striped active" role="progressbar"
                                                     aria-valuenow="45"
                                                     aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                                    提交中...
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="address-set" aria-labelledby="profile-tab">


                            <div class="text-center">
                                <span class="tit">修改收货地址</span>
                            </div>


                            <form action="${ctxPath}/user/editAddress" method="post">
                                <div class="text-center">
                                    <div class="input-group" style="padding: 30px">
                                        <span class="input-group-addon" id="address">地址</span>
                                        <input type="text" class="form-control" name="address"
                                               value="${session.user.address}"
                                               placeholder="你的收货地址" aria-describedby="address">
                                    </div>


                                    <div class="input-group" style="padding: 30px">
                                        <span class="input-group-addon" id="phone">电话</span>
                                        <input type="text" class="form-control" name="phone"
                                               value="${session.user.phone}"
                                               placeholder="你的电话号码" aria-describedby="phone">
                                    </div>

                                    <div class="input-group" style="padding: 30px">
                                        <span class="input-group-addon" id="trueName">姓名</span>
                                        <input type="text" class="form-control" name="trueName"
                                               value="${session.user.trueName}"
                                               placeholder="收货人姓名" aria-describedby="trueName">
                                    </div>

                                    <div class="input-group" style="padding: 30px">
                                        <span class="input-group-addon" id="postNumber">邮政编码</span>
                                        <input type="text" class="form-control" name="postNumber"
                                               value="${session.user.postNumber}" placeholder="你的邮政编码"
                                               aria-describedby="postNumber">
                                    </div>


                                </div>

                                <div class="row text-center">
                                    <button type="submit" class="btn btn-default">保存</button>

                                </div>
                                <br>
                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<%include("/common/footer.html"){}%>

<script type="text/javascript" src="${ctxPath}/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/bootstrap.min.js"></script>
<script src="${ctxPath}/js/jquery.cropit.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/nav.js"></script>
<script type="text/javascript">
    $('#myTab a').click(function (e) {
        $(this).tab('show');
    })
</script>


<script>
    $(function () {
        $('.image-editor').cropit({
            imageState: {
                src: '${session.user.img}'
            }
        });

        $('.conform').click(function () {
            var imageData = $('.image-editor').cropit('export');
            b64 = imageData.substring(22);

            $.post("${ctxPath}/img/changeHead",
                    {
                        content: b64
                    },
                    function (data, status) {
                        if (data.status == true) {
                            $('#checkInfo').hide('fast');
                        } else {
                            $('#checkInfo').hide('fast');
                        }
                    });

        });

    });
</script>


<%}%>